import React, { useState } from 'react'

// 目标：点击按钮开启倒计时
// 问题：多次点击会开启多个定时器来控制 count，出问题了
// !解决：开启定时器之前，把上一个定时器给清除了，保证永远只有一个定时器来控制 count 的变化
// 把 timer 提取到外部，这样保证每次渲染其实公用的都是的这个 timer 变量
// 防抖：持续触发不执行，不触发的一段时间后才执行
// 节流：持续触发也执行，只不过执行的频率变低了
let timer = null
export default function App() {
  const [count, setCount] = useState(10)
  const handleClick = () => {
    clearInterval(timer)
    timer = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开启倒计时</button>
    </div>
  )
}
